<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="../../WEB-INF/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">
    <ui:define name="title">Role Page</ui:define>
    <ui:define name="content">
        <h:outputStylesheet>
            .dashed_line {
                border-color: #d9d9d9;
                border-style: dashed !important;
            }

            .dashed_line:hover {
                border-color: #2162b0;
                border-style: dashed;
            }

            .role-card-actions {
                border-top: 1px solid #e8e8e8;
                background: #fafafa;
                zoom: 1;
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .role-card-actions > li {
                float: left;
                text-align: center;
                margin: 12px 0;
                color: rgba(0, 0, 0, .45) !important;
            }

            .role-card-actions > li > a {
                color: rgba(0, 0, 0, .45);
            }

            .role-card-actions > li > a:hover {
                color: #2162b0;
            }

            .role-card-actions > li:not(:last-child) {
                border-right: 1px solid #e8e8e8;
            }

            .bordered_line {
                border: 1px solid #e8e8e8;
            }

            .bordered_line:hover {
                border-color: #2162b0;
            }

            .bordered_line.activate {
                border-color: #2162b0 !important;
            }

            .role-card {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                margin: 10px 0;
                padding: 0;
                list-style: none;
                background: #fff;
                border-radius: 2px;
                position: relative;
                -webkit-transition: all .3s;
                transition: all .3s;
            }
        </h:outputStylesheet>
        <h:form id="role_form" prependId="false">
            <div class="p-grid sample-layout">
                <div class="p-col-12 p-md-3">

                    <p:dataList id="role_table" value="#{viewScope.roles}" var="role"
                                rowIndexVar="index" type="none" itemType="none" rows="10"
                                styleClass="paginated">
                        <f:facet name="header">
                            <p:outputLabel value="Role List"/>
                        </f:facet>
                        <div class="p-grid">
                            <p:outputPanel layout="block" style="text-align: center; "
                                           class="role-card bordered_line p-col-12 p-md-12 #{role.id == null ? 'dashed_line' : role.id == viewScope.selectedRole.id ? 'activate' : ''}">
                                <h4>
                                    <p:commandLink
                                            styleClass="#{role.id == null ? 'fa fa-plus' : ''}"
                                            oncomplete="if(#{role.id == null}){ PF('role_dialog').show()} else {Role.init()}"
                                            action="#{controller.onSelectRow}"
                                            update=":role_dialog_form:role_dialog,permission_panel,role_table"
                                            style="display: block;">
                                        <p:outputLabel style="padding-left: 5px;"
                                                       value="#{role.id == null ? msg['framework']['add'] : role.name}"/>
                                        <f:setPropertyActionListener value="#{role}"
                                                                     target="#{viewScope.selectedRole}"/>
                                    </p:commandLink>
                                    <p:outputLabel value="#{role.remark}"
                                                   style="font-weight:normal"/>
                                </h4>
                                <p:outputPanel rendered="#{role.id != null}" layout="block"
                                               style="text-align: center">
                                    <ul style="display: flex;" class="role-card-actions">
                                        <li style="width: 50%;"><p:commandLink
                                                styleClass="fa fa-pencil" action="#{controller.edit}"
                                                oncomplete="PF('role_dialog').show()"
                                                update=":role_dialog_form:role_dialog">
                                            <p:outputLabel style="padding-left: 5px;"
                                                           value="#{msg['framework']['edit']}"/>
                                            <f:setPropertyActionListener value="#{role}"
                                                                         target="#{viewScope.selectedRole}"/>
                                        </p:commandLink></li>
                                        <li style="width: 50%;"><p:commandLink
                                                styleClass="fa fa-trash" action="#{controller.delete}"
                                                update="role_table">
                                            <p:outputLabel style="padding-left: 5px;"
                                                           value="#{msg['framework']['delete']}"/>
                                            <f:setPropertyActionListener value="#{role}"
                                                                         target="#{viewScope.selectedRole}"/>
                                            <p:confirm header="Confirmation"
                                                       message="Are you sure delete?"
                                                       icon="pi pi-exclamation-triangle"/>
                                        </p:commandLink></li>
                                    </ul>
                                </p:outputPanel>
                            </p:outputPanel>
                        </div>
                    </p:dataList>
                </div>
                <div class="p-col-12 p-md-9 ">
                    <div class="p-grid">
                        <div class="p-col-12">
                            <p:panel id="permission_panel" header="Permission">
                                <p:outputPanel layout="block" styleClass="p-grid sample-layout"
                                               rendered="#{viewScope.role == null}">
                                    <p:outputPanel layout="block" style="text-align: center; "
                                                   class="role-card p-col-12 p-md-12 ">
                                        <h4>
                                            <h:outputText value="#{msg['framework']['noRecords']}"/>
                                        </h4>
                                    </p:outputPanel>
                                </p:outputPanel>
                                <p:outputPanel layout="block" styleClass="p-grid sample-layout"
                                               rendered="#{viewScope.role != null}">
                                    <p:outputPanel layout="block" style="text-align: center; "
                                                   class="role-card bordered_line p-col-12 p-md-12 dashed_line ">
                                        <h4>
                                            <p:commandLink styleClass="fa fa-plus"
                                                           action="#{controller.save}" style="display: block;"
                                                           update="menuform">
                                                <p:outputLabel style="padding-left: 5px;"
                                                               value="#{msg['framework']['save']}"/>
                                            </p:commandLink>
                                        </h4>
                                    </p:outputPanel>

                                    <p:selectManyCheckbox id="permission" widgetVar="permission"
                                                          value="#{viewScope.role.resourceIds}" layout="custom"
                                                          columns="5">
                                        <c:set var="index" value="0"/>
                                        <c:set var="itemIndex" value="#{viewScope.resources.size()}"/>
                                        <ui:include src="../WEB-INF/include/permission_panel.xhtml">
                                            <ui:param name="resources" value="#{viewScope.resources}"/>
                                            <ui:param name="forId" value="permission"/>
                                        </ui:include>
                                    </p:selectManyCheckbox>
                                </p:outputPanel>
                            </p:panel>
                        </div>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
    <ui:define name="dialog">
        <h:form id="role_dialog_form">
            <p:dialog id="role_dialog" widgetVar="role_dialog" responsive="true"
                      minWidth="500" width="500" minimizable="true" maximizable="true"
                      header="#{msg['framework']['add']}" modal="true" showEffect="fade"
                      hideEffect="fade">
                <p:outputPanel id="content" styleClass="ui-fluid"
                               rendered="#{viewScope.role != null}">
                    <p:panelGrid columns="2"
                                 columnClasses="ui-g-12 ui-md-3,ui-g-12 ui-md-9" layout="grid"
                                 styleClass="ui-panelgrid-blank form-group form-elements"
                                 style="border:0px none; background-color:transparent;">
                        <h:outputText value="#{msg['common']['code']}"/>
                        <p:inputText value="#{viewScope.role.code}"/>
                        <h:outputText value="#{msg['common']['name']}"/>
                        <p:inputText value="#{viewScope.role.name}"/>
                        <h:outputText value="#{msg['common']['remark']}"/>
                        <p:inputTextarea value="#{viewScope.role.remark}"
                                         autoResize="false"/>
                    </p:panelGrid>
                </p:outputPanel>
                <f:facet name="footer">
                    <p:commandButton icon="fa fa-check"
                                     value="#{msg['framework']['save']}" action="#{controller.save}"
                                     onclick="PF('role_dialog').hide();" update="role_table"/>
                    <p:commandButton icon="fa fa-close" class="secondary-button"
                                     onclick="PF('role_dialog').hide();"
                                     value="#{msg['framework']['cancel']}"/>
                </f:facet>
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>